<template>
	<view>

		<view class='classification' v-for="(v,i) in classification"  @click='manpack(urlAll[i],v.packageTagId)'>
			<image src='../../static/logo.png'></image>
			<view class='classification-text'>
				<text>{{urlAll[i]}}</text>
				<text class='types'>{{v.packageTagName}}</text>
				<view class='classification-text-1'>
					<text>{{v.packageCount}}</text>
					<text>个</text>
				</view>
			</view>
			<view class='jump'>></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	// import request from '../../utils/axios.js'
	import { reactive, ref } from "vue"
	interface ificationData {
		packageTagId : number,
		packageTagName : string,
		packageCount : number
	}
	let classification : ificationData[] = reactive([])
	const requestTask = () => {

		uni.request({
			url: 'http://172.16.129.235:8080/patient/pack/findPackageTagNameAndCount', //仅为示例，并非真实接口地址。
			// data: {
			//        name: 'name',
			//        age: 18
			// },
			success: function (res) {
				res.data.data.sort((a, b) => {
					return a.packageTagId - b.packageTagId
				})
				classification.length = 0
				classification.push(...res.data.data)
			}
		});

	}

	requestTask()
	// const data = () => {
	// 	request('/pack/findPackageTagNameAndCount','get').then(({ data }) => {
	// 		console.log(data);
	// 	})
	// }
	// data()
	const urlAll = [ '优雅绅士', '粉红挚爱', '关爱父母', '职场无忧']
	const manpack = (i,id) => {
		// console.log(id);
		uni.navigateTo({
			url: '/page_checkup/manpackage/manpackage'+'?id='+id
		});
	}
</script>
<style lang="less">
	.classification {
		width: 690rpx;
		height: 140rpx;
		background-color: #eee;
		border-radius: 8rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;
		}

		.classification-text {
			margin-top: 20rpx;
			margin-left: 20rpx;

			.types {
				margin-left: 15rpx;
			}

			.classification-text-1 {
				text {
					font-size: 25rpx;
					color: rgba(00, 00, 00, 0.5);
					margin-left: 10rpx;
				}
			}
		}

		.jump {
			margin-top: 40rpx;
			margin-left: 230rpx;
			font-size: 40rpx;
			color: rgba(00, 00, 00, 0.5);
		}

	}
</style>